<template>
    <div class="temp">
        <div v-for="(item,index) in datalist" class="goodsBox">
            <div class="switch">
                <mt-switch v-model="value[index]"></mt-switch>
            </div>
            <div class="goodsinfo">
                <div class="goodsImg">
                    <img :src="item.thumb_path" alt="">
                </div>
                <div class="goodsOther">
                    <div class="title" v-text="item.title"></div>
                    <div class="content">
                        <div class="price">￥{{item.sell_price}}</div>
                        <div class="option">
                            <carCount :initCount="item.count" :goodsid="item.id" @sendData="getResObj"></carCount>
                        </div>
                        <div class="del" @click="delRow(item.id,index)">删除</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="total">
            <div class="total-l">
                <p>总计（不含运费）</p>
                <p>已勾选<span class="count">{{totalCount}}</span>件商品，总价<span class="price">￥{{totalAmount}}</span></p>
            </div>
            <div class="total-r">
                <mt-button type="danger">去结算</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {arr2obj, updateCount, removeItem} from '../../kits/storeData'
    import common from "../../kits/common"
    import {Toast} from 'mint-ui'
    import carCount from "../subcom/carCount.vue"
    export default {
        data(){
            return {
                datalist: [],
                value: [],
                totalAmount: 0, //总价格
            }
        },
        created() {
            this.getList();
        },
        methods: {
            getList() {
                let result = arr2obj();
                let str = ''
                for (var k in result) {
                    str += k + ","
                }
                str = str.substring(0, str.length - 1);
                const url = common.apidomain + '/api/goods/getshopcarlist/' + str;
                this.$http.get(url).then((response) => {
                    let body = response.body;
                    if (body.status != 0) {
                        Toast(body.message);
                        return;
                    }
                    this.datalist = body.message;
                    for (var i = 0, len = this.datalist.length; i < len; i++) {
                        //初始化value数组的值
                        this.value.push(false);
                        //将result中的每个商品的数量复制给datalist里面的元素的count属性
                        this.datalist[i].count = result[this.datalist[i].id];
                    }
                });
            },
            getResObj(resObj) {
                //更新当期datalist中商品的数量
                for (var i = 0; i < this.datalist.length; i++) {
                    let item = this.datalist[i];
                    if (resObj.goodsid == item.id) {
                        if (resObj.type == "add") {
                            item.count = item.count + 1;
                        } else {
                            item.count = item.count - 1;
                        }
                    }
                }
                //更新本地localstorage中存储的商品数量
                updateCount(resObj);
            },
            delRow(goodsid, index) {//删除一整行数据
                //删除this.value中对应的设置
                this.value.splice(index, 1);
                //删除this.datalist对应的值；
                this.datalist.splice(index, 1);
                //删除本地localstorage中对应的值
                removeItem(goodsid);
            }
        },
        computed: {
            //定义计算总件数和总价的属性
            totalCount() {
                //计算this.value数组中值为true的个数
                let trueArr = this.value.filter(item => item);
                let amount = 0;
                this.value.forEach((item, index) => {
                    if (item) {
                        let itemcount = this.datalist[index].count;
                        let price = this.datalist[index].sell_price;
                        let itemprice = itemcount * price;
                        amount += itemprice;
                    }
                });
                this.totalAmount = amount;
                return trueArr.length;
            }
        },
        components: {
            carCount
        }
    }
</script>

<style scoped>
    .goodsBox {
        width: 100%;
        height: 100px;
        border-bottom: 1px solid rgba(0, 0, 0, .3);
    }

    .goodsBox .switch {
        float: left;
        width: 15%;
        height: 100px;
        padding-top: 30px;
    }

    .goodsBox .goodsinfo {
        float: left;
        width: 85%;
        height: 100px;
    }

    .goodsBox .goodsinfo .goodsImg {
        float: left;
        width: 100px;
        height: 100px;
        padding-top: 12px;
        overflow: hidden;
    }

    .goodsBox .goodsinfo .goodsImg img {
        width: 75px;
        height: 75px;
    }

    .goodsBox .goodsinfo .goodsOther {
        padding: 5px;
    }

    .goodsBox .goodsinfo .goodsOther .title {
        font-size: 16px;
        color: #26d0ff;
        max-height: 2.4em;
        line-height: 1.2em;
    }

    .goodsBox .goodsinfo .goodsOther .content {
        margin-top: 20px;
    }

    .goodsBox .goodsinfo .goodsOther .price {
        float: left;
        color: red;
        font-size: 14px;
        line-height: 30px;
    }

    .goodsBox .goodsinfo .goodsOther .option {
        float: left;
        height: 30px;
        margin-left: 10px;
    }

    .goodsBox .goodsinfo .goodsOther .option .subtemp {
        height: 30px;
    }

    .goodsBox .goodsinfo .goodsOther .del {
        float: right;
        color: #26d0ff;
        cursor: pointer;
        font-size: 14px;
        margin-right: 10px;
        line-height: 30px;
    }

    .total {
        background-color: rgba(0, 0, 0, .2);
        height: 80px;
        width: 100%;
        margin-top: 5px;
    }

    .total .total-l {
        float: left;
        height: 80px;
        width: 60%;
        padding: 10px 0 0 10px;
    }

    .total-l p {
        color: #000;
        font-size: 16px;
    }

    .total-l p .count {
        color: #2ac845;
        font-size: 18px;
        font-weight: 600;
    }

    .total-l p .price {
        color: red;
    }

    .total .total-r {
        float: right;
        height: 80px;
        height: 40%;
        padding: 20px;
    }
</style>